<template>
	<view class="container">
		<view class="header">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<view class="header-box">
				<view class="header-box-title">考试中心</view>
				<view class="header-box-search">
					<uni-easyinput prefixIcon="search" trim="all" ConfirmType="search" v-model="searchForm.searchValue"
						placeholder="请输入搜索内容" @input="searchChange">
					</uni-easyinput>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="segmented">
				<view class="segmented-left">
					<view class="segmented-left-box" :class="{ 'segmented-active': tabForm.tabActive == index}"
						v-for="(item, index) in tabForm.tabData" :key="index" @click="tabSort(index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="main-content">
				<swiper class="swiperTtemBox" :current="tabForm.tabActive" @change="changeTab" @transition="transition"
					@animationfinish="animationfinish">
					<!-- circular 启用循环滑动 -->
					<swiper-item v-for="(swiperItem,swiperIndex) in tabForm.tabData" :key="swiperIndex">
						<scroll-view class="scroll-div" scroll-y="true" :refresher-enabled="basicData.showRefresher"
							@scrolltolower="scrolltolower()"
							:refresher-triggered="tabForm.tabData[tabForm.tabActive].refresherState"
							@refresherrefresh="refresherrefresh" scroll-with-animation>
							<view class="content-item">
								<view class="main-content"
									v-show="tabForm.tabData[tabForm.tabActive].listData.length>0">
									<view class="card_div" v-for="(item,index) in swiperItem.listData" :key="index"
										@tap="openDetail(index,item)">
										<view class="card_grids_div">
											<view class="card_grids_left" :style="{width:item.title?'calc(100% - 70px)':'100%'}">
												<skeleton :row="2" title animate :loading="item.title?false:true">
													<view class="card_grids_left-item">
														<view class="card_grids_left_top">
															<!-- <view class="info_lable">
																<uni-tag :inverted="true" :text="item.label" type="success" />
															</view> -->
															<view class="info_title">
																{{item.title}}
															</view>
														</view>
														<view class="card_grids_left_text">
															<view class="card_grids_left_text-box">
																题量：{{item.num}}
															</view>
															<view class="card_grids_left_text-box">
																满分：{{item.totalScore}}
															</view>
															<view class="card_grids_left_text-box">
																时间：{{item.time}}分钟
															</view>
														</view>
													</view>
												</skeleton>
											</view>
											<view class="card_grids_right" v-if="item.title">
												<view class="card_grids_right-button">
													<button class="mini-btn" type="primary" plain="true"
														size="mini">开始考试</button>
												</view>
											</view>
										</view>
									</view>
									<uni-load-more :status="tabForm.tabData[tabForm.tabActive].status" iconType="circle"
										:iconSize="20" v-if="swiperItem.listData.length>0" />
								</view>
								<view class="no_data" v-show="tabForm.tabData[tabForm.tabActive].listData.length==0">
									<view class="no_data_grids">
										<view class="no_data_img_div">
											<image class="no_data_img"
												src="../../static/examinationImg/noData/noData.png">
											</image>
										</view>
										<view class="no_data_text">暂无数据</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//基础参数
				basicData: {
					pageShow: false,
					showRefresher: true,
				},
				//搜索
				searchForm: {
					searchValue: ''
				},
				//菜单
				tabForm: {
					tabData: [{
							id: 1,
							name: '未完成',
							showData: true,
							status: "more",
							moreState: true,
							refresherState: false,
							page: 1,
							limit: 10,
							count: 0,
							listData: [{
								title: '2025年工程研究考试',
								label: '简单',
								num: 60,
								totalScore: 100,
								time: 60
							}],
						},
						{
							id: 2,
							name: '已完成',
							showData: true,
							status: "more",
							moreState: true,
							refresherState: false,
							page: 1,
							limit: 10,
							count: 0,
							listData: [{
								title: '2025年工程研究考试',
								label: '困难',
								num: 60,
								totalScore: 100,
								time: 60
							}],
						}
					],
					tabActive: 0, // 菜单当前选中项
					scrollLeft: 0,
				}
			}

		},
		methods: {
			//打开详情
			openDetail(value) {
				this.jump(`/pages/examinationManagement/detail/index?id=${value.id}`)
			},
			//搜索
			searchChange(e) {

			},
			//菜单
			tabSort(index) {
				this.tabForm.tabActive = index;
			},
			//滑动切换菜单选择
			changeTab(e) {
				this.tabForm.tabActive = e.detail.current;
				if (this.tabForm.tabData[this.tabForm.tabActive].listData.length == 0) {
					/* this.getNoteListData('load'); */
				}
			},
			//刷新
			refresherrefresh() {
				this.basicData.showRefresher = true;
				if (!this.tabForm.tabData[this.tabForm.tabActive].refresherState) {
					this.tabForm.tabData[this.tabForm.tabActive].refresherState = true;
					/* this.getNoteListData('load'); */
					setTimeout(e => {
						this.tabForm.tabData[this.tabForm.tabActive].refresherState = false;
					}, 1000)
				}
			},
			//列表上拉加载
			scrolltolower() {
				if (this.tabForm.tabData[this.tabForm.tabActive].moreState) {
					this.tabForm.tabData[this.tabForm.tabActive].page++;
					this.tabForm.tabData[this.tabForm.tabActive].status = "loading";
					/* this.getNoteListData('more') */
				}
			},
			//滚动
			transition(e) {
				this.basicData.showRefresher = false;
			},
			animationfinish(e) {
				this.basicData.showRefresher = true;
			},
			//跳转
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "@/pages/examinationManagement/components/noData/css/index.css";

	.container {
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF;
	}

	.header {
		width: 100%;
		height: calc(110px + var(--status-bar-height));
		background-image: url("../../static/examinationImg/index/header.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.header-box {
			width: 100%;
			height: calc(100% - var(--status-bar-height));
			padding: 10px 12px 12px;
			box-sizing: border-box;

			.header-box-title {
				width: 100%;
				font-size: 18px;
				font-weight: bold;
				color: #000000;
				margin-bottom: 24px;
			}

			.header-box-search {
				width: 100%;
				height: 34px;

				::v-deep .uni-easyinput__content {
					border-radius: 17px;
				}
			}
		}
	}

	.main {
		width: 100%;
		height: calc(100% - 110px - var(--status-bar-height));
		background-color: #ffffff;

		.segmented {
			width: 100%;
			height: 42px;
			border-bottom: 1px solid #F6F6F6;
			padding: 0 16px;
			box-sizing: border-box;

			.segmented-left {
				width: 100%;
				height: 100%;
				display: flex;

				.segmented-left-box {
					height: 100%;
					font-size: 14px;
					color: #8A8A8A;
					align-items: center;
					display: flex;
					box-sizing: border-box;
					margin-right: 20px;
				}

				.segmented-active {
					font-weight: bold;
					color: #000000;
				}
			}
		}

		.main-content {
			width: 100%;
			height: calc(100% - 42px);

			.swiperTtemBox {
				width: 100%;
				height: 100%;
			}

			.scroll-div {
				width: 100%;
				height: 100%;
			}

			.content-item {
				width: 100%;
				height: 100%;
			}

			.main-content {
				width: 100%;
				height: auto;
				padding: 0 16px 30px;
				box-sizing: border-box;

				.card_div {
					width: 100%;
					height: auto;
				}

				.card_grids_div {
					width: 100%;
					border-bottom: 1px solid #F0F0F0;
					padding: 18px 0;
					box-sizing: border-box;
					align-items: flex-end;
					display: flex;
					border-radius: 6px;
				}


				.card_grids_left {
					width: calc(100% - 70px);
					height: auto;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					/* 行与行之间留有均匀间隔。 */
				}

				.card_grids_left-item {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.card_grids_left_top {
					width: 100%;
					height: 20px;
					align-items: center;
					display: flex;
					margin-bottom: 12px;

					.info_lable {
						width: 40;
						height: 100%;
						align-items: center;
						display: flex;
						margin-right: 6px;
					}

					.info_title {
						/* width: calc(100% - 46px); */
						width: 100%;
						height: 100%;
						line-height: 20px;
						font-size: 15px;
						font-weight: 600;
						color: #000000;
						box-sizing: border-box;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

				}

				.card_grids_left_text {
					width: 100%;
					height: 20px;
					align-items: center;
					display: flex;

					.card_grids_left_text-box {
						line-height: 20px;
						font-size: 13px;
						color: #6B6F75;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-right: 12px;
					}

				}

				.card_grids_right {
					width: 62px;
					height: 100%;
					margin-left: 8px;

					.card_grids_right-button {
						width: 100%;
						height: 100%;

						.mini-btn {
							width: 62px;
							font-size: 11px;
							padding: 0;
							align-items: center;
							justify-content: center;
							display: flex;
						}
					}
				}
			}

		}
	}

	/* 骨架屏 */
	/deep/.lx-skeleton {
		padding: 0;
	}

	/deep/.lx-skeleton .lx-skeleton_banner {
		width: 100%;
		margin: 0;
		height: 78px;
		border-radius: 4px;
	}
</style>